import React from 'react'
import ContentLoader, { IContentLoaderProps } from 'react-content-loader'

// 骨架屏在线制作：https://skeletonreact.com/
// 支持：React 、React Native 、Vue 、Angular、SVG
const Skeleton = (props: IContentLoaderProps) => (
  <ContentLoader
    speed={2}
    width={340}
    height={200}
    viewBox='0 0 360 124'
    backgroundColor='#d9d9d9'
    foregroundColor='#ecebeb'
    {...props}
  >
    <rect x='48' y='8' rx='3' ry='3' width='88' height='6' />
    <rect x='48' y='26' rx='3' ry='3' width='52' height='6' />
    <rect x='0' y='56' rx='3' ry='3' width='410' height='6' />
    <rect x='0' y='72' rx='3' ry='3' width='380' height='6' />
    <rect x='0' y='88' rx='3' ry='3' width='178' height='6' />
    <circle cx='20' cy='20' r='20' />
  </ContentLoader>
)

export default Skeleton
